<template>
  <div class="container">
    <div class="userInfo-page">
      <canvas canvas-id='canvas' class='canvas'></canvas>
      <ul class="list">
        <li class="item" :class="{ 'on': focusIndex == 1 }">
          <div class="title require">公司名称</div>
          <div class="content">
            <input class="input-item" type="text" placeholder="请填写公司名称" v-model="formData.name" @focus="focused(1)" @blur="blured">
          </div>
        </li>
        <li class="item" :class="{ 'on': focusIndex == 2 }">
          <div class="title require">公司电话</div>
          <div class="content">
            <input class="input-item" type="text" placeholder="请填写公司电话" v-model="formData.phone" @focus="focused(2)" @blur="blured">
          </div>
        </li>
        <li class="item">
          <div class="title">公司LOGO</div>
          <div class="content">
            <div class="logo-box">
              <div class="logo">
                <img class="image" :src="formData.logo" alt="">
              </div>
              <div class="btn" @click="upload(1)">点击上传</div>
            </div>
          </div>
        </li>
        <li class="item" :class="{ 'on': focusIndex == 3 }">
          <div class="title">公司行业</div>
          <div class="content">
            <input class="input-item" type="text" placeholder="请填写公司行业" v-model="formData.profession" @focus="focused(3)" @blur="blured">
          </div>
        </li>
        <li class="item" :class="{ 'on': focusIndex == 4 }">
          <div class="title require">职位称谓</div>
          <div class="content">
            <input class="input-item" type="text" placeholder="请填写职位称谓" v-model="formData.title" @focus="focused(4)" @blur="blured">
          </div>
        </li>
        <li class="item" :class="{ 'on': focusIndex == 5 }">
          <div class="title">经营范围</div>
          <div class="content">
            <div class="text">{{ formData.scope }}</div>
            <textarea maxlength="-1" class="textarea" placeholder="请填写经营范围" v-model="formData.scope"  @focus="focused(5)" @blur="blured"></textarea>
          </div>
        </li>
        <li class="item" :class="{ 'on': focusIndex == 6 }">
          <div class="title">公司简介</div>
          <div class="content">
            <div class="text">{{ formData.introduce }}</div>
            <textarea maxlength="-1" class="textarea" placeholder="请填写公司简介" v-model="formData.introduce" @focus="focused(6)" @blur="blured"></textarea>
          </div>
        </li>
      </ul>
      <ul class="list">
        <li class="item" :class="{ 'on': focusIndex == 7 }">
          <div class="title require">副营公司</div>
          <div class="content">
            <input class="input-item" type="text" placeholder="请填写副营公司名称" v-model="formData.subCompany" @focus="focused(7)" @blur="blured">
          </div>
        </li>
        <li class="item">
          <div class="title">公司LOGO</div>
          <div class="content">
            <div class="logo-box">
              <div class="logo">
                <img class="image" :src="formData.logo2" alt="">
              </div>
              <div class="btn" @click="upload(2)">点击上传</div>
            </div>
          </div>
        </li>
      </ul>
      <div class="button">
        <button class="btn" :class="{ 'off': isSubmit }" :disabled="isSubmit" @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import upng from 'upng-js'

export default {
  data () {
    return {
      /*
       * focusIndex           获取焦点下标
       * isSubmit             判断是否已提交
       */
      focusIndex: 0,
      isSubmit: false,

      formData: {
        member_id: '',
        name: '',             //名称
        logo: '',             //logo
        title: '',            //职位
        scope: '',            //经营范围
        profession: '',       //行业
        introduce: '',        //介绍
        phone: '',            //电话
        subCompany: '',       //子公司
        logo2: '',            //子公司logo
      },
    }
  },

  onShareAppMessage (res) {
    let self = this;
    let url = `${self.$confs.shareUrl}?id=${self.userInfo.id}`;
    return {
      title: self.$confs.shareTitle,
      path: url,
    }
  },

  computed: {
    userInfo () {
      return this.$store.state.userInfo;
    },
    company () {
      return this.$store.state.company;
    },
  },

  methods: {
    submit () {
      let self = this;
      self.$toast.show();
      self.isSubmit = true;
      self.$axios.company(self.formData).then(res=>{
       self.$toast.hide();
       self.isSubmit = false;
        if ( 0 === res.data.code * 1) {
          self.$toast.show({
            title: '修改成功',
            icon: 'success',
            duration: 1500,
          });
          self.$store.dispatch('getCompany', res.data.data);
        }else {
          self.$toast.show({
            title: '网络错误',
            icon: 'warn',
            duration: 1500,
          });
        }
      })
    },
    focused (index) {
      this.focusIndex = index;
    },
    blured () {
      this.focusIndex = 0;
    },
    /*
     * 上传logo
     */
    upload (index) {
      let self = this;
      wx.chooseImage({
        count: 1,
        success (res) {
          let file = res.tempFilePaths[0];
          let canvas = wx.createCanvasContext('canvas');
          canvas.drawImage(file, 0, 0, 150, 150);
          canvas.draw(false, () => {
            wx.canvasGetImageData({
              canvasId: 'canvas',
              x: 0,
              y: 0,
              width: 150,
              height: 150,
              success(res) {
                let pngData = upng.encode([res.data.buffer], res.width, res.height)
                let base64 = 'data:image/png;base64,' + wx.arrayBufferToBase64(pngData);
                if (index === 1) self.formData.logo = base64;
                if (index === 2) self.formData.logo2 = base64;
              }
            })
          });
        }
      });
    },

    init (){
      let self = this;
      this.formData.member_id = this.userInfo.id;
      self.$axios.getCompany({id : self.userInfo.id}).then(res=>{
        if (0 === res.data.code * 1) {
          if ( (typeof res.data.data).toLocaleLowerCase() === 'object' && res.data.data ) {
            self.formData = res.data.data;
          }
        }
      })
    }
  },

  mounted () {
    this.init();
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
